<template>
  <div id="app">
    <div id="upload">
      <upload/>
    </div> 
    <div id="mian">
      <header></header>
      
      <content>
        <!-- 左侧 -->
        
        <div id="muke-left">
          
          <div class="common-menu">
              <router-link to="/main/">
                <folder id="muke-folder"></folder>
              </router-link>
          </div>
          <div id="muke-avatar">
            <el-popover
              id="muke-user-info"
              placement="right"
              width="220"
              trigger="click">
              <div id="user-set">账号设置</div>
              <div id="muke-list-content">
                  <ul class="nav nav-pills nav-stacked">
                      <!-- <li class="active"><a href="#">全部文件</a></li> -->
                      <li @click="myInfo" ><a>
                          <i class="el-icon-user"></i> 我的信息</a>
                      </li>
                      <li @click="openUpdatePwd"><a>
                          <i class="el-icon-edit"></i> 修改密码</a>
                      </li>
                      <li @click="selectAvatar"><a>
                          <i class="el-icon-upload"></i> 上传头像</a>
                          <input id='img' type="file" name='img' accept="image/*" @change="uploadAvatar" />
                      </li>
                      <li><a @click="logout">
                          <i class="el-icon-switch-button"></i> 退出登录</a>
                          <!-- <span class="label label-badge label-success">4</span> -->
                      </li>
                  </ul>
              </div>
              <!-- <el-button slot="reference">click 激活</el-button> -->
              <!-- https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1169793435,172234529&fm=26&gp=0.jpg -->
              <el-avatar slot="reference"  id='avatar' :size="40" :fit="fill" icon="el-icon-user-solid"
                  :src='this.avatar'>
              </el-avatar>
            </el-popover>
          </div>
      </div>

      <!-- 路由页面 -->
      <router-view/>
      </content>
          
      <footer></footer>
    </div>
    <!-- 我的信息 -->
    <el-drawer
        title="我的信息"
        :visible.sync="myInfo_flag"
        :direction="direction">
        <div class="info-content">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="username" label="账号" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item prop="diskSize" label="磁盘空间" :label-width="formLabelWidth">
              <el-input v-model="form.diskSize" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item prop="nickname" label="昵称" :label-width="formLabelWidth">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-form>
          <div class="myInfo_footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="saveInfo" 
                  :loading="loading">{{ loading ? '提交中 ...' : '保 存' }}
            </el-button>
          </div>
        </div>
    </el-drawer>

    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="updatePassword"
      width="50%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form :model="updatePwdData" :rules="pwdRules" ref="updatePwdData">
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input type="text" v-model="updatePwdData.email" style="width:90%"
            prefix-icon='el-icon-user-solid' autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码"  prop="code" :label-width="formLabelWidth">
            <el-input type="text" prefix-icon='el-icon-user' style="width:90%"
                v-model="updatePwdData.code"  placeholder="验证码" >
                <el-button @click="sendCode('updatePwdData')" id='valid-code' :disabled='disabled'
                    slot="append" style="width:120px;color:#66a6ff" >
                <span v-if="!disabled" >{{loading ? '发送中' : '发送验证码'}}</span>
                <span v-if="disabled">{{count}}s重新发送</span>    
                </el-button>
            </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd" :label-width="formLabelWidth">
          <el-input type="password" v-model="updatePwdData.pwd" style="width:90%"
            prefix-icon='el-icon-lock'  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePassword = false">取 消</el-button>
        <el-button type="primary" @click="updatePwd('updatePwdData')">{{ loadingUpdate ? '修改中 ...' : '修 改' }}</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
  import folder from '../../components/icons/folder';
  import mukeLeft from "../../components/muke_left/mukeLeft";
  import util from '../../utils/util';
  import upload from "../../views/upload";
  export default {
    name: 'App',
    components:{
      folder,upload,
      mukeLeft
    },
    mounted(){
      this.initAvatar();
    },
    data(){
      return{
        fill:'fill',
        myInfo_flag: false,
        direction: 'rtl',
        loading: false,
        loadingUpdate: false,
        form: {
          username: '',
          nickname: '',
          diskSize: '',
          email: '',
          phone: ''
        },
        rules: {
          nickname: [
            { required: true, message: '昵称不能为空', trigger: 'blur' }
          ]
        },
        pwdRules: {
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度为 6 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
          ]
        },
        avatar:'',
        formLabelWidth: '80px',
        updatePassword:false,
        updatePwdData:{
          email:'',
          code:'',
          pwd:''
        },
        disabled: false,
        count: 180
      }
    },
    methods:{
      toUserPage(){
        this.$router.push('/main/user');
      },
      // 退出登录操作
      logout(){
         this.$confirm('是否退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发起退出登录请求
          this.$axios.post(util.API_HOST + '/user/logout',{
          }).then(response => {
            let result = response.data;
            if (result.code === 200){
              // 退出成功,进入登录页
              this.$router.push('/login');
            } else {
              // 退出失败
              this.$notify.error({
                title:'退出失败',
                message:result.message
              });
            }
          }).catch(err => {
            this.$notify.error({
              title:'退出异常',
              message:err.message
            })
          });
        }).catch(() => {});
      },
      // 我的信息
      myInfo() {
        this.myInfo_flag = true;
        this.$axios.get(util.API_HOST + '/user/myInfo')
        .then(response => {
            console.log(response);
            let result = response.data.data;
            this.form.username = result.username;
            this.form.nickname = result.nickname;
            this.form.diskSize = result.diskSize + 'GB';
            this.form.email = result.email;
            this.form.phone = result.phone;
        }).catch(err => {

        })
      },
      // 打开修改密码对话框
      openUpdatePwd() {
        this.updatePassword = true;
      },
      // 修改密码操作
      updatePwd(pwdData) {
        this.$refs[pwdData].validate((valid) => {
                let data = this.$refs[pwdData].model;
                if(valid) {
                    this.loadingUpdate = true;
                    this.$axios.post(util.API_HOST + '/user/update/pwd',{
                        email:data.email,
                        code:data.code,
                        pwd:data.pwd
                    }).then(response => {
                        this.loadingUpdate = false;
                        let result = response.data;
                        if(result.code === 200){
                            // 跳转至登录页
                            this.$router.push('/login');
                        } else {
                            this.$notify.error({
                                title:'修改失败',
                                message:result.message
                            });
                        }
                    }).catch(err => {
                        this.loadingUpdate = false;
                        this.$notify.error({
                            title:'修改失败',
                            message:err.message
                        })
                    });

                }
            });

      },
      // 发送验证码
      sendCode(pwdData) {
        
        this.$refs[pwdData].validateField('email',(valid) => {
            if(valid === "") {
                this.loading = true;
                // 校验通过
                this.$axios.get(util.API_HOST + '/user/mail/send/update/pwd/code?toMail='
                + this.updatePwdData.email).then(response => {
                    let result = response.data;
                    if(result.code === 200){
                        this.loading = false;
                        this.disabled = true;
                        this.timeCount();
                        this.$notify.success({
                            title:'验证码发送成功',
                            message:result.message
                        })
                    } else {
                      this.loading = false;
                      this.$notify.error({
                        title: '验证码发送失败',
                        message: result.message
                      })
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$notify.error({
                        title:'验证码发送失败',
                        message:err.message
                    })
                });
                
            } else {
              console.log('error')
            }
        });
      },
      // 倒计时
      timeCount() {
          let interval = setInterval(() => {
              this.count --;
              console.log(this.count);
              if(this.count === -1) {
                  clearInterval(interval);
                  this.disabled = false;
                  this.count = 180;
              }
          }, 1000);
      },
      cancelForm() {
        this.loading = false;
        this.myInfo_flag = false;
      },
      // 保存基本信息
      saveInfo() {
        this.$refs['form'].validateField('nickname',(valid) => {
          let nickname = this.$refs['form'].model.nickname;
          if(nickname.trim().length === 0){
            return false;
          }
          if(valid === ""){
            this.loading = true;
            this.$axios.post(util.API_HOST + '/user/update/user',{
              nickname: nickname
            }).then(response => {
              let result = response.data;
              if(result.code === 200){
                this.$notify.success({
                  title:'昵称修改成功',
                  message:response.data.message
                });
              } else {
                this.$notify.error({
                  title:'修改失败',
                  message:result.message
                })
              }
              this.loading = false;
            }).catch(err => {
              this.$notify.error({
                title:'修改失败',
                message:err.message
              })
            });
          } else {
            return false;
          }
        });
      },
      // 选取头像
      selectAvatar() {
        document.getElementById('img').click();
      },
      // 上传头像
      uploadAvatar(){
        let file = document.getElementById('img').files[0];
        util.getImgObj2Base64(file,(a) => {
          this.$axios.post(util.API_HOST + '/user/upload/avatar',{avatar:a})
          .then(response => {
            let result = response.data;
            if (result.code === 200) {
              this.avatar = a;
              // document.getElementById('avatar').children[0].src = a;
            }
          }).catch(err => {

          })
        });
        
      },
      // 初始化头像
      initAvatar(){
        this.$axios.get(util.API_HOST + '/user/myInfo')
        .then(response => {
          let result = response.data;
          if(result.code === 200){
            this.avatar = result.data.avatar;
          }
        }).catch(err => {

        })
      }
    }
    

  }
 
</script>

<style>
  *{padding: 0;margin: 0;}
  #app{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  header{
    height: 0;
  }
  content{
    flex: 1;
    /*background-color: aqua;*/
    position: relative;
    min-width: 1310px;
    min-height: 500px;
    
  }
  footer{
    height: 0;
  }

  /* 左侧栏样式 */
  #muke-folder{
        width: 40px;height: 40px;
        margin: 20px;
  }
  #muke-left{
      /* background-color: cornflowerblue; */
      width: 80px;
      height: 100vh;
      min-height: 500px;
      /*border-right:#BFBFBF solid 0.0625rem;*/
      box-shadow: rgb(119, 118, 118) 0px 0px 12px ;
      float: left;
      position: relative;
  }
  
  #muke-avatar{
      width: 80px;
      height: 80px;
      /* background-color:#409EFF; */
      position: absolute;
      bottom: 0;
  }
  #avatar{
    margin:20px;
  }
  #avatar:hover{
    cursor: pointer;
    box-shadow: rgb(119, 118, 118) 0px 0px 20px ;
  }
  .common-menu{
      width: 80px;
      height: 80px;
      
      /*background-color: #409EFF;*/
  }
  #muke-user-info{
    box-shadow: rgb(119, 118, 118) 0px 0px 20px ;
  }
  .common-menu img{
      width: 40px;height: 40px;
      margin: 20px 20px 20px 20px;
      
  }
  a:hover{
      text-decoration: none;
  }

  #muke-avatar > span > span{
    height: 80px;
    position: absolute;
    left: 0;bottom: 0;
  }
  #user-set{
    margin:10px 18px;
    font-size: 18px;
    font-weight: 700;
  }

  .info-content{
    margin: 0 30px 0 20px;
  }
  .myInfo_footer{
    margin-left: 80px;
  }

  #img {
    display: none;
  }
</style>
